import React from 'react';
import {connect} from 'react-redux'

import {Icon, message, Modal, Table} from "antd";
import {deepCopy, messages, queryCurrencyPrecision} from "share/common";
import NewVendorForm from "containers/request/new-request/new-vendor-form";

class AddBankAccount extends React.Component {

  state = {
    addAccountVisible: false
  };

  refreshBankOptions = value => {
    const { bankListOption } = this.props;
    const { venBankAccountBeans: { bankAccount, venBankNumberName, bankName } } = value;
    let bankListOptionCopy = deepCopy(bankListOption);
    bankListOptionCopy.push({
      bankName: bankName,
      bankAccount: bankAccount,
      venBankNumberName: venBankNumberName
    });
    this.props.refreshBankOptions(bankListOptionCopy, {
      accountNumber: bankAccount,
      accountName: venBankNumberName
    });
  };

  handleAdd = () => this.setState({ addAccountVisible: true });

  handleNewVendorOk = value => this.setState({ addAccountVisible: false }, () => this.refreshBankOptions(value));

  render() {
    const { addAccountVisible } = this.state;
    const { expenseInfo, isAuditEditable, hasSupplierSetting, vendorInfo } = this.props;
    let createBankAccountEnable = (isAuditEditable || (hasSupplierSetting === 'true' || hasSupplierSetting === 'bankOnly'));
    return createBankAccountEnable && (
      <div className='add-bank-account'>
        <Icon type="plus-circle" onClick={this.handleAdd} className="edit-pay-info__icon"/>
        <Modal
          key={'addAccountVisible'}
          visible={addAccountVisible}
          wrapClassName="new-vendor-modal"
          title={messages('expense-1.key501')/*添加银行卡号*/}
          cancelText={messages('common.back')/*返回*/}
          width={700}
          onCancel={() => {
            this.setState({ addAccountVisible: false });
          }}
          footer={null}>
          <NewVendorForm
            newVendorVisible={addAccountVisible}
            onCancel={() => this.setState({ addAccountVisible: false })}
            key='addAccountVisible'
            payeeInfo={{ ...vendorInfo }}
            userOid={expenseInfo.applicantOID}
            companyOid={expenseInfo.docCompanyOID}
            currentVendor={{}}
            onOk={(value) => this.handleNewVendorOk(value, 'bank')}
          />
        </Modal>
      </div>
    )
  }
}

AddBankAccount.propsType = {

};

AddBankAccount.defaultProps = {

};

function mapStateToProps(state) {
  return {
    language: state.main.language,
    company: state.login.company,
    user: state.login.user,
    authPolicyAll: state.main.authPolicyAll,
    options: state.login.options,
    profile: state.login.profile,
  }
}

export default connect(mapStateToProps)(AddBankAccount)
